<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" v-if="!disableSubmit">
        <a-row>

          <a-col :xs="24" :sm="12">
            <a-form-item label="资产名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-search-select-tag :async="true"  v-decorator="['assetId', validatorRules.assetId]"
                                   @change="selectSub"
                                   dict="zcgl_asset_info,asset_name,id"/>
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item label="资产明细" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-search-select-tag
                :trigger-change="true"
                v-decorator="['assetSubIds', validatorRules.assetSubIds]"
                :dictOptions="searchOptions"
                placeholder=""/>
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item label="客户名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-search-select-tag :async="true"  type="list" v-decorator="['customerId', validatorRules.customerId]"
                                   :trigger-change="true"
                                   dict="zcgl_customer_info,name,id" placeholder="请选择客户名称"/>
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item label="报修时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择报修时间" v-decorator="['repairDate', validatorRules.repairDate]" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>

          <!--        <a-col :span="24">-->
          <!--        <a-form-item label="反馈的微信信息" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
          <!--          <a-input v-decorator="['attentionId']" placeholder="请输入反馈的微信用户信息"></a-input>-->
          <!--        </a-form-item>-->
          <!--        </a-col>-->

          <a-col :span="24">
            <a-form-item label="报修图片" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <!--              class="avatar-uploader"-->
              <j-image-upload text="上传" v-model="repairImages" :isMultiple="true" :number="3"></j-image-upload>
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item label="报修标题" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-input v-decorator="['repairTitle', validatorRules.repairTitle]" placeholder="请输入报修标题"></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item label="报修内容" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['repairContent', validatorRules.repairContent]" rows="3"
                          placeholder="请输入报修内容说明"></a-textarea>
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
          <a-form-item label="所属公司" v-is-group :labelCol="labelCol" :wrapperCol="wrapperCol">

          <j-company-select-tag placeholder="请选择所属公司" v-decorator="[ 'companyId', validatorRules.companyId]" :trigger-change="true"/>
          </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item label="维修状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['handleStatus', validatorRules.handleStatus]" @change="handleStatusChange" :trigger-change="true"
                                 dictCode="zcgl_repair_handle_status" placeholder="请选择维修状态"/>
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12" v-if="isHandleUser">
            <a-form-item label="维修人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <!--          <j-select-user-by-dep v-decorator="['handleUserId']"/>-->
              <j-search-select-tag :async="true"  v-decorator="['handleUserId', validatorRules.handleUserId]" dict="sys_user,realname,id" placeholder="维修人"/>
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12" v-if="isFeedback">
            <a-form-item label="维修时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择维修时间" v-decorator="['feedbackDate', validatorRules.feedbackDate]" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12" v-if="isFeedback">
            <a-form-item label="维修金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['money', validatorRules.money]" placeholder="请输入维修金额" style="width: 100%"/>
            </a-form-item>
          </a-col>

          <a-col :span="24" v-if="isFeedback">
            <a-form-item label="维修图片" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <!--              class="avatar-uploader"-->
              <j-image-upload text="上传" v-model="feedbackImages" :isMultiple="true" :number="3"></j-image-upload>
            </a-form-item>
          </a-col>

          <a-col :span="24" v-if="isFeedback">
            <a-form-item label="维修说明" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['feedbackContent', validatorRules.feedbackContent]" rows="3"
                          placeholder="请输入维修内容说明"></a-textarea>
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>

      <a-row v-else>

        <a-col :xs="24" :sm="12">
          <a-form-item label="资产名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
            {{model.assetId_dictText}}
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="12">
          <a-form-item label="资产明细" :labelCol="labelCol" :wrapperCol="wrapperCol">
            {{model.assetSubIds_dictText}}
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="12">
          <a-form-item label="客户名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
            {{model.customerId_dictText}}
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="12">
          <a-form-item label="微信信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
            {{model.attentionId_dictText}}
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="12">
          <a-form-item label="报修时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
            {{model.repairDate}}
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="报修图片" :labelCol="labelCol2" :wrapperCol="wrapperCol2">

            <div v-for="(fileDetail,index) in repairImageList" :key="index">
              <div style="float: left;width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
                <div
                  style="width: 100%;height: 100%;position: relative;border: 1px solid #d9d9d9;border-radius: 4px;">
                  <img style="height: 100%; width: 100%" :src="fileDetail" preview="1">
                </div>
              </div>
            </div>
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="报修标题" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
            {{model.repairTitle}}
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="报修内容" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
            {{model.repairContent}}
          </a-form-item>
        </a-col>

        <a-col v-is-group :xs="24" :sm="12">
          <a-form-item label="所属公司" :labelCol="labelCol" :wrapperCol="wrapperCol">
            {{model.companyId_dictText}}
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="12">
          <a-form-item label="维修状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
            {{model.handleStatus_dictText}}
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="12" v-if="isHandleUser">
          <a-form-item label="维修人" :labelCol="labelCol" :wrapperCol="wrapperCol">
            {{model.handleUserId_dictText}}
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="12" v-if="isFeedback">
          <a-form-item label="维修时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
            {{model.feedbackDate}}
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="12" v-if="isFeedback">
          <a-form-item label="维修金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
            {{model.money}}
          </a-form-item>
        </a-col>

        <a-col :span="24" v-if="isFeedback">
          <a-form-item label="维修图片" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
            <div v-for="(fileDetail,index) in feedbackImageList" :key="index">
              <div style="float: left;width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
                <div
                  style="width: 100%;height: 100%;position: relative;border: 1px solid #d9d9d9;border-radius: 4px;">
                  <img style="height: 100%; width: 100%" :src="fileDetail" preview="2">
                </div>
              </div>
            </div>
          </a-form-item>
        </a-col>

        <a-col :span="24" v-if="isFeedback">
          <a-form-item label="维修说明" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
            {{model.feedbackContent}}
          </a-form-item>
        </a-col>

      </a-row>
    </a-spin>
  </j-modal>
</template>

<script>

  import { httpAction, getFileAccessHttpUrl } from '@/api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import JDate from '@/components/jeecg/JDate'
  import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import JImageUpload from '@/components/jeecg/JImageUpload'
  import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
  import { AssetSubMixin } from '@/api/assetSubMixin'
  import { queryRepairImageByMainId } from '@/api/repair'
  import JCompanySelectTag from '@comp/jeecg/JCompanySelectTag'
  import { ACCESS_TOKEN, IS_GROUP } from '@/store/mutation-types'

  export default {
    name: 'RepairInfoModal',
    mixins: [AssetSubMixin],
    components: {
      JDate,
      JSelectUserByDep,
      JDictSelectTag,
      JImageUpload,
      JCompanySelectTag,
      JSearchSelectTag
    },
    data () {
      return {
        form: this.$form.createForm(this),
        searchOptions: [],
        feedbackImageList: [],
        repairImageList: [],
        title: '操作',
        feedbackImages: '',
        repairImages: '',
        width: 800,
        visible: false,
        isHandleUser: false,
        isFeedback: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        labelCol2: {
          xs: { span: 24 },
          sm: { span: 3 }
        },
        wrapperCol2: {
          xs: { span: 24 },
          sm: { span: 20 }
        },
        confirmLoading: false,
        disableSubmit: false,
        validatorRules: {
          assetId: {
            rules: [
              { required: true, message: '请输入资产名称!' }
            ]
          },
          assetSubIds: {
            rules: [
              { required: false, message: '请输入资产明细!' }
              // { validator: this.validateCode }
            ]
          },
          customerId: {
            rules: [
              { required: false, message: '请输入客户名称!' }
            ]
          },
          repairDate: {
            rules: [
              { required: false, message: '请选择报修日期!' }
            ]
          },
          repairTitle: {
            rules: [
              { required: true, message: '请输入报修问题!' }
            ]
          },
          repairContent: {
            rules: [
              { required: true, message: '请输入报修问题描述!' }
            ]
          },
          handleStatus: {
            rules: [
              { required: true, message: '请输入维修状态!' }
            ]
          },

          handleUserId: {
            rules: [
              { required: false, message: '请选择维修人员!' }
            ]
          },
          feedbackContent: {
            rules: [
              { required: false, message: '请输入维修内容!' }
            ]
          },
          feedbackDate: {
            rules: [
              { required: false, message: '请选择维修时间!' }
            ]
          },
          money: {
            rules: [
              { required: false, message: '请输入维修金额!' }
            ]
          }
        },
        url: {
          add: '/zcgl/repairInfo/add',
          edit: '/zcgl/repairInfo/edit'
        }
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token}

      let isGroup = sessionStorage.getItem(IS_GROUP)
      if (isGroup == 1) {
        let companyName = {
          rules: [{
            required: true, message: '请选择所属公司!'
          }]
        }
        this.validatorRules.companyId = companyName
      }
    },
    methods: {

      validateCode (rule, value, callback) {
        if (this.searchOptions && this.searchOptions.length > 0) {
          if (value == null || value == undefined || value == '') {
            callback('请选择资产明细！')
            return
          }
        }
        callback()
      },
      add () {
        this.edit({})
      },
      edit (record) {
        this.form.resetFields()
        this.repairImages = ''
        this.feedbackImages = ''
        this.feedbackImageList = []
        this.repairImageList = []
        this.model = Object.assign({}, record)
        //有ID证明是编辑查询报修图片
        if (this.model.id){
          this.getRepairImage()
          //有反馈ID就查询反馈图片
          if (this.model.feedbackId){
            this.getRepairFeedbackImage()
          }
        }
        this.selectSub1(this.model.assetId, this.model.assetSubIds)
        this.handleStatusChange(this.model.handleStatus)
        this.visible = true

        if (!this.disableSubmit){
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(this.model, 'companyId', 'assetId', 'assetSubIds', 'customerId', 'attentionId', 'repairContent', 'repairDate',
              'feedbackContent', 'feedbackDate', 'money', 'handleUserId', 'handleStatus', 'repairTitle'))
          })
        }
      },
      close () {
        this.$emit('close')
        this.visible = false
      },
      handleOk () {
        const that = this

        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            let formData = Object.assign(this.model, values)

            let repairImageList = []
            if (that.repairImages && that.repairImages.split(',') != '') {
              that.repairImages.split(',').forEach((v, i) => {
                repairImageList.push({
                  imageUrl: v,
                  repairId: that.model.id
                })
              })
            }
            formData.repairImageList = repairImageList

            let repairFeedbackImageList = []
            if (that.feedbackImages && that.feedbackImages.split(',') != '') {
              that.feedbackImages.split(',').forEach((v, i) => {
                repairFeedbackImageList.push({
                  imageUrl: v,
                  repairId: that.model.id
                })
              })
            }
            formData.repairFeedbackImageList = repairFeedbackImageList
            console.log('表单提交数据', formData)
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          }

        })
      },
      handleCancel () {
        this.close()
      },

      popupCallback (row) {
        if (!this.disableSubmit){
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(row, 'companyId', 'assetId', 'assetSubIds', 'customerId', 'attentionId', 'repairContent', 'repairDate',
              'feedbackContent', 'feedbackDate', 'money', 'handleUserId', 'handleStatus', 'repairTitle'))
          })
        }
      },
      handleStatusChange(value){
        if (value == 10 || value == 20){
          this.validatorRules.handleUserId.rules[0].required = true
          this.validatorRules.feedbackContent.rules[0].required = false
          this.isHandleUser = true
          this.isFeedback = false
        } else if (value == 30){
          this.validatorRules.handleUserId.rules[0].required = true
          this.validatorRules.feedbackContent.rules[0].required = true
          this.isHandleUser = true
          this.isFeedback = true
        } else {
          this.validatorRules.handleUserId.rules[0].required = false
          this.validatorRules.feedbackContent.rules[0].required = false
          this.isHandleUser = false
          this.isFeedback = false
        }
        this.$forceUpdate();
      },
      getRepairImage () {
        let that = this
        queryRepairImageByMainId({ id: this.model.id, type: 0 }).then((res) => {
          if (res.success) {
            if (res.result && res.result.length > 0) {
              let fileList = []
              res.result.forEach((v, i) => {

                if (that.disableSubmit){
                  that.repairImageList.push(getFileAccessHttpUrl(v.imageUrl))
                } else {
                  fileList.push(v.imageUrl)
                }
              })
              that.repairImages = fileList.join(',')
            }
          } else {
            that.repairImages = ''
          }
        }).finally(() => {
          that.$previewRefresh()
        })
      },
      getRepairFeedbackImage () {
        let that = this
        queryRepairImageByMainId({ id: this.model.id, type: 1, repairFeedbackId: this.model.feedbackId }).then((res) => {
          if (res.success) {
            if (res.result && res.result.length > 0) {
              let fileList = []
              res.result.forEach((v, i) => {
                if (that.disableSubmit){
                  that.feedbackImageList.push(getFileAccessHttpUrl(v.imageUrl))
                } else {
                  fileList.push(v.imageUrl)
                }
              })
              that.feedbackImages = fileList.join(',')
            }
          } else {
            that.feedbackImages = ''
          }
        }).finally(() => {
          that.$previewRefresh()
        })
      },

    }
  }
</script>

<style lang="less" scoped>
  .ant-form-item {
    margin-bottom: 10px;
  }

  .ant-col {
    min-height: 51px !important;
  }

  /*.ant-form-item span {*/
  /*  position: absolute !important;*/
  /*  min-height: 20px !important;*/
  /*}*/
</style>